<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>

    <!-- <div id="app2">
        <h1>app2里</h1>
        <h1>{{ msg }}</h1>
    </div> -->

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            // template: '<a href="#">我是a--{{ msg }}</a>',
            data() {
                return {
                    msg: '你好'
                }
            },
            methods: {
                fn1 () {
                    console.log('fn1被调用')
                }
            },
            computed: {
                total () {
                    return 1999
                }
            },
            // 最早调用的钩子，但是他是在数据初始化之前调用的
            // 所以此时还无法访问到数据和方法
            beforeCreate () {
                console.log('beforeCreate', this.msg) // undefined
            },
            // 最早能访问数据的钩子
            created () {
                console.log('created', this.msg, this) // 你好
                // 常用，因为他是最早能访问数据的钩子
                // 所以可以把给当前页面准备数据的代码写到这里
                // 发请求，拿到结果，赋值到data里的数据
            },
            // 渲染前
            beforeMount () {
                // 只是因为我们暂时用的是html文件，所以找dom元素能找到
                // 在脚手架里不光是内容没渲染连dom元素都找不到
                console.log('beforeMount', document.querySelector('h1').innerText)
            },
            // 渲染后
            mounted () {
                console.log('mounted', document.querySelector('h1').innerText)
            }
        }) // .$mount('#app2')
    </script>
</body>
</html>